<template>
  <div class="container">
    <div class="flex-yc flex-xbt input-bgc">
      <h2>应用任务</h2>
      <el-input
        class="input"
        placeholder="搜索"
        v-model="searchKeyword"
        :suffix-icon="Search"
        @input="onInputChange"
      ></el-input>
    </div>
    <table-comp
      :column="column"
      index
      :list="appList"
      :total="total"
      :pageSize="pageSize"
      @onCurrentChange="onCurrentChange"
    >
      <template v-slot:handleSlot="{ row }">
        <el-button link type="danger" @click="deleteApplicationRun(row.id)">
          删除
        </el-button>
        <el-button link type="primary" @click="openAppResultFiles(row.id)">
          打开文件夹
        </el-button>
        <el-button link type="primary" @click="openAppTask(row.id)">
          打开应用
        </el-button>
      </template>
    </table-comp>
  </div>

  <dialog-com
    v-model="isShowLog"
    title="查看运行日志"
    submitTxt="下载"
    width="500"
    :center="true"
    @onSubmit="onDownLog"
    @onClose="onCloseLog"
  >
    <template v-slot:headerTip>
      <app-log-header />
    </template>
    <app-log :data="logData"></app-log>
  </dialog-com>
  <dialog-com
    v-model="isShowResultFiles"
    title="结果文件夹"
    width="900"
    :center="true"
    @onSubmit="isShowResultFiles = false"
    @onClose="isShowResultFiles = false"
  >
    <app-result-files :propsData="resultFilesData" v-if="isShowResultFiles"></app-result-files>
  </dialog-com>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import TableComp from '@/components/table/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { tableColumn } from '@/components/table/column'
import {
  queryAppTaskBody,
  respAppTaskData,
} from '@/pages/member/api/types/application'
import {
  reqAppAddToOutCome,
  reqDeleteApplicationRun,
  reqDownAppRunLogData,
  reqGetAppRunLogData,
  reqGetAppTaskList,
} from '@/pages/member/api/application.ts'
import AppLogHeader from '@/pages/member/views/application/components/AppLogHeader.vue'
import dialogCom from '@/components/dialog/index.vue'
import AppLog from './components/AppLog.vue'
import AppResultFiles from './components/AppResultFiles.vue'
import { download } from '@/api/common.ts'
import { getUploadHttpUrl, MsgError, MsgSuccess } from '@/utils/utils.ts'

const column = reactive<tableColumn[]>([
  { label: '应用ID', prop: 'applicationTitleEn', width: '180' },
  { label: '创建时间', prop: 'createTime', width: '180' },
  { label: '任务编号', prop: 'runCode', width: '250' },
  { label: '任务类型', prop: 'typeStr', width: '120' },
  { label: '应用名称', prop: 'applicationName',width: '250' },
  { label: '运行', prop: 'statusStr' },
  // {
  //   type: 'comp',
  //   label: '运行日志',
  //   prop: 'id',
  //   align: 'center',
  //   style: { link: true, type: 'primary' },
  //   is: 'el-button',
  //   txt: '日志',
  //   callback: (data: respAppTaskData) => onOpenLog(data),
  // },
  {
    type: 'comp',
    label: '添加到成果流',
    prop: 'id',
    width: '120',
    align: 'center',
    style: { type: 'primary', size: 'small' },
    is: 'el-button',
    txt: '添加',
    callback: (data: respAppTaskData) => onAddToOutCome(data),
  },
  {
    label: '操作',
    prop: '-',
    fixed: 'right',
    type: 'slot',
    slotName: 'handleSlot',
    width: '250',
  },
])

const isShowLog = ref(false)
// 是否打开文件夹
const isShowResultFiles = ref(false)
const resultFilesData = ref({
  appId: 0,
  title: '',
})
const searchKeyword = ref('')
const appList = ref<respAppTaskData[]>([])

onMounted(() => getAppTaskList())

const onInputChange = (val: string) => {
  searchKeyword.value = val
  getAppTaskList()
}

// 添加到成果流
const onAddToOutCome = async (data: respAppTaskData) => {
  const { code, msg } = await reqAppAddToOutCome(data.id)
  code === 0 && MsgSuccess(msg || '添加成功')
  code !== 0 && MsgError(msg || '添加失败')
}

const clickAppid = ref<number>(0)
const logData = ref([])

// 打开日志窗口
const onOpenLog = async (data: respAppTaskData) => {
  isShowLog.value = true
  clickAppid.value = data.applicationId!
  return await reqGetAppRunLogData(data.id!)
}

// 关闭日志窗口
const onCloseLog = async () => {
  isShowLog.value = false
  clickAppid.value = 0
}

// 下载日志
const onDownLog = async () => {
  const resp = await reqDownAppRunLogData(clickAppid.value)
  if (resp.code === 0 && resp.data) {
    download(getUploadHttpUrl(resp.data))
  }
}

// 删除任务
const deleteApplicationRun = async (runId: number) => {
  const { code, msg } = await reqDeleteApplicationRun(runId)
  code === 0 && MsgSuccess(msg || '删除成功')
  code !== 0 && MsgError(msg || '删除失败')
  getAppTaskList()
}

// 打开文件夹
const openAppResultFiles = async (runId: number) => {
  resultFilesData.value = {
    appId: runId,
    title: '',
  }
  isShowResultFiles.value = true
}

// 打开应用
const openAppTask = async (runId: number) => {
  MsgSuccess('打开应用')
}

// 获取任务列表
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const getAppTaskList = async () => {
  const reqData: queryAppTaskBody = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    text: searchKeyword.value,
  }
  let resp = await reqGetAppTaskList(reqData)
  appList.value = resp.data.list
  total.value = resp.data.total
}

const onCurrentChange = (page: number) => {
  pageNo.value = page
  getAppTaskList()
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;

  .input-bgc {
    margin-bottom: 15px;

    h2 {
      font-size: 20px;
      color: #021429;
      font-weight: bold;
    }

    .input {
      width: 200px;
    }
  }
}
</style>
